<template>
   <div class="person">
    <h2>姓名:{{ person.name }}</h2>
    <h2>姓名:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import {reactive,toRefs,toRef} from 'vue'

    // 数据
    let person = reactive({
        name:'张三',
        age:18
    })

    // toRefs的作用就是将reactive包裹的对象分解为ref的响应式数据
    let {name,age} = toRefs(person)
    console.log(name,age)
    // toRef是将reactive中的key和value拿出来做响应式数据
    let n1 = toRef(person,'age')
    console.log(n1.value)
    // 方法
    function changeName(){
        name.value +='~'
    }
    function changeAge(){
        age.value += 1
    }
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>